import cn from 'classnames';
import PropTypes from 'prop-types';
import React, { useState, useEffect, useMemo } from 'react';
import s from './style.module.css';
import SvgIcon from './svg.jsx';
import { cloneDeep } from 'lodash';
import ECharts from '@kuiper-components/echarts';
import fetchFer from 'API/fetch';
import Helper from '../../../../components/Helper';

function Info({ className, jobs: allJobs, taskType,refresh }) {
	const [data, setData] = useState({});
	const getData = async () => {
		const res = await fetchFer(
			`/api/v2/jobs/task_summary?task_group_type=host`,
			{
				method: 'GET',
			}
		);
		setData(res.data);
	};
	const initECharts = e => {
		const option = {
			title: {
				text: '任务类型',
				top: 'middle',
				left: '28%',
				textAlign: 'center',
				textStyle: {
					fontSize: 12,
					fontWeight: 'normal',
				},
			},
			tooltip: {
				confine: true,
				trigger: 'item',
				formatter: '{b} : {c} ({d}%)',
			},
			legend: {
				type: 'scroll',
				orient: 'vertical',
				left: '50%',
				top: 'middle',
				itemGap: 20,
				icon: 'circle',
				itemHeight: 6,
				itemWidth: 6,
				data: ['周期性任务', '单次任务'],
				textStyle: { padding: [0, 0] },
			},
			series: {
				type: 'pie',
				radius: ['50%', '60%'],
				center: ['30%', '50%'],
				label: {
					normal: {
						show: false,
						position: 'outside',
					},
					emphasis: {
						show: false,
						textStyle: {
							fontSize: 20,
							fontWeight: 'normal',
						},
					},
				},
				labelLine: {
					normal: {
						show: false,
					},
					emphasis: {
						show: false,
					},
				},
			},
		};
		const option2 = cloneDeep(option);

		option2.title.text = `监测资产统计`;
		const option1Data = [
			{
				name: '单次任务',
				value: data.trigger_type?.manual || 0,
				itemStyle: {
					color: '#0B6FD6',
				},
			},
			{
				name: '周期性任务',
				value: data.trigger_type?.schedule || 0,
				itemStyle: {
					color: '#52A6FA',
				},
			},
		];
		const option2Data = [
			{
				name: '已监测资产',
				value: data.job_summary?.has_monitor || 0,
				itemStyle: {
					color: '#11AB4E',
				},
			},
			{
				name: '未监测资产',
				value: data.job_summary?.no_monitor || 0,
				itemStyle: {
					color: '#FAAF2B',
				},
			},
		];
		option.series.data = option1Data;
		option2.series.data = option2Data;
		option2.legend.data = ['已监测资产', '未监测资产'];
		const percentMap1 = option1Data.reduce((obj, { name, value }) => {
			obj[name] = value;
			return obj;
		}, {});

		const percentMap2 = option2Data.reduce((obj, { name, value }) => {
			obj[name] = value;
			return obj;
		}, {});
		option.legend.formatter = name => {
			return `${name}：${percentMap1[name]}`;
		};
		option2.legend.formatter = name => {
			return `${name}：${percentMap2[name]}`;
		};
		if (e) {
			return option2;
		} else {
			return option;
		}
	};

	useMemo(() => {
		getData();
	}, [refresh]);
	useEffect(() => {}, [data]);
	return (
		<div className={cn(className, s.infoBox)}>
			<div className={s.nopad}>
				<div className={s.item}>
					<div className={s.countsr}>{data.task?.total || 0}</div>
					<div className={s.label}>
						<SvgIcon active={1}></SvgIcon>
						<span className={s.textCor}>任务数</span>
					</div>
				</div>
				<div className={s.item}>
					<div className={s.countsr}>{data.task?.running || 0}</div>
					<div className={s.label}>
						<SvgIcon active={2}></SvgIcon>
						<span className={s.textCor}>正在检测任务数</span>
					</div>
				</div>
				<div className={s.item}>
					<div className={s.countsr}>{data.task?.vul || 0}</div>
					<div className={s.label}>
						<SvgIcon active={3}></SvgIcon>
						<span className={s.textCor}>存在风险任务数</span>
					</div>
				</div>
				<Helper
					overlay={
						<div className={s.helpBox}>
							<div>
								任务数：主机安全监测任务总数，包括周期性任务及单次任务。
							</div>
							<div>
								正在检测任务数：开启了监测开关的周期性任务以及正在检测的单次任务。
							</div>
							<div>存在风险任务数：最近一次监测结果存在漏洞的监测任务。</div>
						</div>
					}
					placement="top"
					className={s.helper}
				/>
			</div>
			<ECharts className={cn(s.chart)} key={1} option={initECharts()} />
			{/* <div className={cn(s.chart)}>
				<ECharts key={2} option={initECharts(2)} />
				<Helper
					overlay={
						<div className={s.helpBox}>
							<div>已监测资产：已经下发过监测任务的资产。</div>
							<div>未监测资产：从未下发过监测任务的资产。</div>
						</div>
					}
					className={s.helper}
				/>
			</div> */}
		</div>
	);
}

Info.propTypes = {
	className: PropTypes.string,
	jobs: PropTypes.arrayOf(
		PropTypes.shape({
			vulSettings: PropTypes.object.isRequired,
		})
	),
	taskType: PropTypes.string.isRequired,
};
Info.defaultProps = {
	jobs: [],
};

export default Info;
